<script setup>
import { ref, reactive, watch } from 'vue'
import { getDeviceAlarm } from '@/assets/api/api'
import { useRoute } from 'vue-router'
const route = useRoute()

const deviceClassify = 2
const deviceClassId = ref(route.params.deviceClass)
watch(route, () => {
    deviceClassId.value = route.params.deviceClass
    if (
        deviceClassId.value &&
        route.path == `/fireControl/alarm/${deviceClassId.value}`
    ) {
        filterForm.deviceClass = deviceClassId.value
        getData()
    }
})

const filterForm = reactive({
    deviceClassify,
    deviceClass: deviceClassId.value,
})

const loading = ref(false)
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const dataList = ref([])
function getData(page = 1) {
    loading.value = true
    const params = Object.assign(
        {
            page,
            limit: pageSize,
        },
        filterForm
    )
    getDeviceAlarm(params).then((res) => {
        loading.value = false
        const { Items, totalSize } = res.data
        dataList.value = Items
        currentPage.value = +res.data.currentPage
        total.value = totalSize
    })
}
getData(1)
function handleCurrentChange(e) {
    getData(e)
}
function searchAction() {
    getData(1)
}
// 处置
import alarmHandle from '@/components/fireControl/alarmHandle.vue'
const activeData = ref(null)
const handleModalVisible = ref(false)
function handleAction(item) {
    activeData.value = item
    handleModalVisible.value = true
}
function onHandleSuccess() {
    getData(currentPage.value)
}
// 详情
import alarmDetail from '@/components/video/alarmDetail.vue'
const alarmShow = ref(false)
const activeAlarm = ref(null)
function detailAction(item) {
    activeAlarm.value = item
    alarmShow.value = true
}
</script>
<template>
    <!-- 导入 -->
    <alarmHandle
        v-model:visible="handleModalVisible"
        v-if="handleModalVisible"
        :activeData="activeData"
        @success="onHandleSuccess"
    ></alarmHandle>
    <!-- 告警详情 -->
    <alarmDetail
        :activeData="activeAlarm"
        v-model:visible="alarmShow"
        v-if="alarmShow"
    ></alarmDetail>
    <div class="filter-box white-box d-flex">
        <el-form :inline="true" :model="filterForm" class="d-flex-1">
            <el-form-item label="设备号">
                <el-input v-model="filterForm.number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="处理状态">
                <el-select v-model="filterForm.isHandle" placeholder="请选择">
                    <el-option label="未处理" value="0" />
                    <el-option label="已处理 " value="1" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchAction">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto">
        <el-table :data="dataList" class="my-10 full" v-loading="loading">
            <el-table-column label="设备编号" prop="number" width="150" />
            <el-table-column label="设备名称" prop="device_name" />
            <el-table-column
                label="报警类型"
                prop="alarm_type_name"
                width="100"
            />
            <el-table-column label="报警内容" prop="content" />
            <el-table-column label="报警时间" prop="alarm_time" />
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-tooltip effect="dark" content="详情" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="detailAction(scope.row)"
                        >
                            <el-icon size="16"><View /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="处置"
                        placement="top"
                        v-if="scope.row.is_handle == 0"
                    >
                        <el-button
                            type="primary"
                            link
                            @click="handleAction(scope.row)"
                        >
                            <el-icon size="16"><Operation /></el-icon>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="fl-bw">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
